<template>
  <div>
    <el-upload
      :action="url + '/upload/picture'"
      list-type="picture-card"
      accept="image/*"
      :class="{ disabled: isdisabled }"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :on-error="handleError"
      :limit="limit"
      :file-list="getFiles"
    >
      <i class="el-icon-plus"></i>
    </el-upload>

    <!-- 图片预览 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>
<style lang="scss" scope>
.disabled .el-upload--picture-card {
  display: none;
}
</style>
<script>
import { removeFiles } from '../../api/upload'
import { url } from '../../utils/request'

export default {
  data () {
    return {
      url: url,
      isdisabled: false, // 隐藏继续上传图片
      dialogVisible: false, // 是否预览
      fileList: [], // 已上传的图片列表，
      dialogImageUrl: ''// 预览图片url
    }
  },
  mounted () {
    console.log('图片上传mounted')
  },
  computed: {
    getFiles () {
      if (typeof this.files === 'string' && this.files.trim().length > 0) {
        return [{ name: this.files, url: url + '/uploadfiles/' + this.files }]
      }
      if (typeof this.files === 'object' && this.files instanceof Array) {
        const arr = []
        this.files.forEach((item) => {
          arr.push({
            name: item,
            url: url + '/uploadfiles/' + item
          })
        })
        return arr
      }
      return []
    }
  },
  watch: {
    getFiles (data) {
      if (data.length === this.limit) {
        this.isdisabled = true
      }
    },
    $route (data) {
      if (data.path === '/content/add') {
        this.isdisabled = false
      }
    }
  },
  props: {
    limit: {
      type: Number
    },
    files: {
      default: []
    }
  },
  methods: {
    // 删除图片
    async handleRemove (file, fileList) {
      console.log('删除文件啦')
      let fileName = ''
      if (this.files === []) {
        fileName = file.response.data.url.substring(
          file.response.data.url.lastIndexOf('/') + 1
        )
      } else {
        fileName = file.name
      }

      const res = await removeFiles(fileName)
      if (res.data.code === 200) {
        this.$message.success(res.data.data.msg)
        //  this.$emit("file-evn")
        console.log(res.data)
      } else this.$message.error(res.data.data.msg)

      this.isdisabled = false
      this.$emit('removeFileEvn', fileName)
    },
    // 点击文件列表中已上传的文件时的钩子(预览按钮)
    handlePictureCardPreview (file) {
      console.log('点击文件列表中已上传的文件时的钩子')

      // console.log(file)
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 上传成功
    handleSuccess (res) {
      this.$message.success(res.data.msg)
      if (this.limit === 1) {
        this.isdisabled = true
      }

      const fileName = res.data.url.substring(
        res.data.url.lastIndexOf('/') + 1
      )
      this.$emit('fileNameEvn', fileName)
    },
    handleError (err) {
      // console.log(err)
      this.$message.success('上传失败:' + err)
    }
  }
}
</script>
